<template>
    <div>
        <order-detail :showOrderDetail="showOrderDetail" :order="orderProduct" :products="products" :orderId="orderId"
            @onCancelNewModal="onCancels()"></order-detail>
        <print-order :showPrint="showPrint" :order="orderPrint" @onCancelPrintModal="onCancelp()"></print-order>
        <el-dialog :visible.sync="showorder" :append-to-body="true" :close-on-click-modal="false" width="50%"
            :close-on-press-escape="false" :show-close="false" class="ele-modal" :modal-append-to-body='false'>
            <h4 slot="title">团订单详情</h4>
            <div class="product-detail-modal">
                <div>
                    <h3 class="panel-title">基本信息 </h3>
                </div>
                <el-row>
                    <ul class="bill-tips clearfix">
                        <li>
                            <em>团长昵称</em>
                            <span>{{store.store.nickName}}</span>
                        </li>
                        <li>
                            <em>团长姓名</em>
                            <span>{{store.store.realName}}</span>
                        </li>
                        <li>
                            <em>手机号</em>
                            <span>{{store.store.mobile}}</span>
                        </li>
                    </ul>
                </el-row>
                <el-row>
                    <ul class="bill-tips clearfix">
                        <li>
                            <em>团地址</em>
                            <span>{{store.store.address}}</span>
                        </li>
                    </ul>
                </el-row>
                <div>
                    <h3 class="panel-title">团订单基本信息</h3>
                </div>
                <el-row>
                    <ul class="bill-tips clearfix">
                        <li>
                            <em>订单数量</em>
                            <span>{{store.completeCount}}</span>
                        </li>
                        <li>
                            <em>订单金额</em>
                            <span>{{store.completeAmount}}</span>
                        </li>
                        <li>
                            <em>商品种类</em>
                            <span>{{store.count}}种</span>
                        </li>
                    </ul>
                </el-row>
                <el-row>
                    <ul class="bill-tips clearfix">
                        <li>
                            <em>退订单数量</em>
                            <span>{{store.refundCount}}</span>
                        </li>
                        <li>
                            <em>退订单金额</em>
                            <span>{{store.refundAmount}}</span>
                        </li>
                        <li>
                            <em>发货状态</em>
                            <span style="color:#F00;" v-if="store.shipmentStatus === 0">待发货</span>
                            <span style="color:#F00;" v-if="store.shipmentStatus === 1">已发货</span>
                        </li>
                    </ul>
                </el-row>
                <div>
                    <h3 class="panel-title">订单详情</h3>
                </div>
                <el-row>
                    <el-table :data="orders.list" border style="width: 100%; margin-top: 20px" class="list-table"
                        :header-cell-style="{'background-color': '#F5F5F6'}" max-height="300">
                        <el-table-column prop="orderNumber" label="订单号">
                        </el-table-column>
                        <el-table-column prop="user.realName" label="下单客户">
                        </el-table-column>
                        <el-table-column prop="user.mobile" label="联系电话">
                        </el-table-column>
                        <el-table-column prop="totalAmount" label="订单金额(元)">
                        </el-table-column>
                        <el-table-column label="订单状态" prop="user.avatarUrl">
                            <template slot-scope="scope">
                                <span style="color:#1ab394;" v-if="scope.row.orderStatus === -1">已取消</span>
                                <span style="color:#F00;" v-if="scope.row.orderStatus === 1">待付款</span>
                                <span style="color:#F00;" v-if="scope.row.orderStatus === 2">待发货</span>
                                <span style="color:#F00;" v-if="scope.row.orderStatus === 3">待自提</span>
                                <span style="color:#1ab394;" v-if="scope.row.orderStatus === 4">已完成</span>
                                <span style="color:#1ab394;" v-if="scope.row.orderStatus === 5">待退款</span>
                                <span style="color:#1ab394;" v-if="scope.row.orderStatus === 6">已退款</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="下单时间">
                        </el-table-column>
                        <el-table-column prop="shipmentTime" label="发货时间">
                        </el-table-column>
                        <el-table-column label="操作" :width="isAnalysis?'50':'100'">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="orderDetail(scope.row)">详情</el-button>
                                <el-button type="text" size="small" @click="printOrder(scope.row)" v-if="!isAnalysis">打印</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination style="float: right;margin-top: 10px" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" :current-page.sync="orders.currPage" :page-size="orders.pageSize"
                        layout="total, prev, pager, next" :total="orders.totalCount">
                    </el-pagination>
                </el-row>

            </div>
            <div slot="footer" class="row" style="text-align: right;margin-right: 5px;">
                <a class="revision-btn" href="javaScript:void(0)" @click="onCancel">确 定</a>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import orderDetail from '@/views/order/orderDetail'
    import printOrder from './printOrder'
    export default {
        name: "showGroupOrders",
        components: {
            orderDetail,
            printOrder
        },
        props: {
            showorder: {
                type: Boolean,
                default: false
            },
            store: {
                type: Object
            },
            orders: {
                type: Object
            },
            storeId: {
                type: String
            },
            isAnalysis: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                query: {
                    page: 1
                },
                orderProduct: {
                    order: {},
                    orderGoodsList: [],
                    user: {},
                    store: {}
                },
                orderPrint: {
                    order: {},
                    orderGoodsList: [],
                    user: {},
                    store: {}
                },
                orderId: null,
                products: {
                    list: []
                },
                showOrderDetail: false,
                showPrint: false
            }
        },
        mounted: function() {},
        methods: {
            onCancel() {
                this.newForm = this.$options.data().newForm;
                this.$emit('onCancelOrderModal');
            },
            onCancels() {
                this.showOrderDetail = false
            },
            onCancelp() {
                this.showPrint = false
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.query.page = val;
                this.listAllUsers();
            },
            async printOrder(item) {
                console.log(item)
                let res = await this.$api.get('/mall/order/info/' + item.orderId)
                this.orderPrint = res.order
                console.log(res.order)
                this.showPrint = true
            },
            async orderDetail(item) {
                let res1 = await this.$api.get('/mall/ordergoods/list', {
                    orderId: item.orderId
                });
                let res2 = await this.$api.get('/mall/order/info/' + item.orderId)
                this.orderProduct = res2.order
                this.orderId = item.orderId.toString()
                this.products = res1.page
                this.showOrderDetail = true
            },
            async listAllUsers() {
                this.query.storeId = this.storeId
                let res = await this.$api.get('/mall/order/group/list', this.query);
                this.orders = res.page
            }
        }
    }
</script>

<style scoped>
    .product-detail-modal {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        color: #676a6c;
    }

    .ele-modal /deep/ .el-dialog__header {
        border-bottom: 1px solid #e5e5e5;
        padding: 5px 0 2px 15px !important;
    }

    .ele-modal /deep/ .el-dialog__body {
        padding: 0 20px 30px 20px;
    }

    .ele-modal /deep/ .el-dialog__footer {
        border-top: 1px solid #e5e5e5;
        padding: 15px;
    }
</style>
